<template>
	<div class="testModel">
		<h2>Vue Model</h2>
		<p>绑定Model</p>
		<p>用户名 : 
		<input type="text" v-model="user.username" /></p>
		<p>
			密码:<input type="password" v-model="user.pwd" />
		</p>
		<p>
			手机号:<input type="text" v-model="user.phone" />
		</p>
		<p>
			地址:<input type="text" v-model="user.address" />
		</p>
		<p>
			{{user}}
		</p>
		<h2>循环</h2>
		<p v-for="item in userList" v-if="item.id % 2 != 0">
			{{item.id}},{{item.username}},{{item.phone}} 
			<button @click="getUser(item)">获取信息</button>
		</p>
		<!--<p>获取到的用户信息：{{item}}</p>-->
	</div>
</template>

<script>
	//定义组件的信息
	export default {
		name: "TestModel", //组件名称
		data() { //定义变量
			return {
				username:"admin",//双向绑定
				user:{ //对象类型
					username:"",
					pwd:"",
					phone:"",
					address:""
				},
				userList:[
					{
						id:1,
						username:"admin",
						phone:"12312341234"
					},
					{
						id:2,
						username:"test",
						phone:"13212341234"
					},
					{
						id:3,
						username:"jack",
						phone:"15432341234"
					},
					{
						id:4,
						username:"a12345",
						phone:"1222221234"
					},
					{
						id:5,
						username:"sasder",
						phone:"14312341234"
					}
				]
			}
		},
		methods:{ // 定义方法
			getUser(item){
				alert(item.username)
			}
		}
	}
</script>

<style scoped></style>